<template>
  <transition name="fade">
    <div class="set_page" v-show="showLogin">
      <div class="set_bg" v-show="showLogin"></div>
      <div class="pastkwrap">

        <div class="dlogintkm">
          <div class="contm">
            <div class="closedct" @click="closeLogin"></div>
            <div class="logos"><img src="http://www.zhangu365.com/static/images/logoposter.png"></div>
            <dl>
              <dt>使用第三方账号登录</dt>
              <dd><a href="http://www.zhangu365.com/user/login/qq.html?act=vue" target="_blank" class="loginway1 qq" @click="otherLogin">使用QQ账号登录</a></dd>
              <dd><a href="http://www.zhangu365.com/user/login/weixin.html?act=vue" target="_blank" class="loginway2 wx" @click="otherLogin">使用微信账号登录</a></dd>
            </dl>
          </div>
        </div>

      </div>
    </div>

  </transition>


  



</template>

<script>
  var sct;
  import api from '../../api/index.js'
  export default {
    name: "logintk",
    props: ['showLogin'],
    data () {
        return {
            showModal1s: false,
        }
    },
    mounted() {
      //debugger
 
    },
    methods: {
      closeLogin(){
        this.$emit("close");
      },
      otherLogin(){
        this.$emit("close");
        this.checkLogin(1);
      },
      checkLogin(a){
        if(a == 100){
          clearTimeout(sct);
        }else{
          //查询登录状态
          this.$http.get(api.getUser()).then(res => {
          if (res.data.code == 200) {
              if (res.data.status) {
                //debugger
                this.$Message.success('登录成功!');
                this.$emit('save');
                clearTimeout(sct);
              }

            }
          }).catch(error => {
            this.$Message.error('获取用户信息失败~');
          })

          a = a +1;
          var _self = this;
          sct = setTimeout(function () {
              _self.checkLogin(a);
          }, 2000);
        }
      },




    }

  }
</script>

<style type="text/javascript" scoped>
.set_page {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /*background-color: red;*/
    z-index: 99999;
}
.set_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  .pastkwrap{
    position: absolute;
    width: 295px;
    height: 605px;
    left: 50%;
    top: 50%;
    margin: -285px 0 0 -148px;
    background-size: 100% 100%;
    border-radius: 10px;
  }

  .dlogintkm{width:295px; height: 605px; display:block; background: url(http://www.zhangu365.com/static/images/iphonepics.png) no-repeat center; padding: 66px 20px 0; text-align: center;}
  .dlogintkm .contm{position: relative; padding-top: 78px;}
  .dlogintkm .contm .closedct{width:22px; height: 22px; position: absolute; top: 10px; right: 5px; background: url(http://www.zhangu365.com/static/images/closedicos.png) no-repeat center; cursor: pointer;transition:All 0.3s ease-in-out; -webkit-transition:All 0.3s ease-in-out; -moz-transition:All 0.3s ease-in-out; -o-transition:All 0.3s ease-in-out; }
  .dlogintkm .contm .closedct:hover{transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg);}
  .dlogintkm .contm .logos img{display: block; margin: 0 auto}
  .dlogintkm .contm dl{padding: 55px 0 0;}
  .dlogintkm .contm dt{ height: 30px; line-height: 30px; color: #fff; text-align: center; background: url(http://www.zhangu365.com/static/images/tklinebg.png) no-repeat center; font-size: 12px; margin-bottom: 10px;}
  .dlogintkm .contm dd{padding-top: 30px;} 
  .dlogintkm .contm dd a{display: block; width: 220px; height:38px; line-height: 38px; border-radius: 19px; margin: 0 auto; color: #999; font-size: 13px;padding-left: 36px;}
  .dlogintkm .contm dd a.qq{background:#fff url(http://www.zhangu365.com/static/images/dlico1.png) no-repeat 40px center;}
  .dlogintkm .contm dd a.wx{background:#fff url(http://www.zhangu365.com/static/images/dlico2.png) no-repeat 40px center;}

</style>
